Wie SignalStore, Agentic UI und modernes Testing zusammenpassen

Im Gespräch mit Manfred Steyer habe ich mehr darüber erfahren. Manfred trainiert seit Jahren Enterprise-Teams in Angular und ist Trainer unserer Modern Angular Masterclass. Seine Diagnose: Viele Teams führen Modern Angular ein, ohne das Denken dahinter zu wechseln. Sie schreiben altes Angular in neuer Syntax.

Signals sind kein API-Update – sie erfordern ein Umdenken

Wer Signals wie einen besseren EventEmitter behandelt, hat die eigentliche Veränderung in Angular noch nicht vollzogen.

Um das zu erklären, verwendet Manfred eine eingängige Metapher: Die meisten Entwickler denken ihre Anwendung wie ein Drehbuch – mach das, dann jenes, gib diese Daten aus. Angular hat aber aufgehört, Drehbücher zu erwarten. Signals verlangen datenflussorientiertes Denken – Eingaben führen zu Daten, Daten zu weiteren Daten, am Ende steht das, was der Nutzer sieht. Die Metapher ist eher ein Fluss, kein Skript.

Wer das nur als neue Syntax begreift, um das Gleiche wie bisher zu erstellen, bleibt im alten Paradigma stecken und verfehlt, was Modern Angular ausmacht.

Zehn Jahre Angular-Erfahrung können heute bremsen

Wer zehn Jahre Angular geschrieben hat, hat zehn Jahre Patterns aufgebaut – manche davon stehen jetzt aber tragischerweise im Weg.

Wer Modern Angular mit alten Mustern lernt, läuft ins offene Messer — so erläutert es Manfred. Karma, Jasmin, imperative Workarounds, die irgendwann nötig waren – sie sitzen nicht mehr in den Projekten, sie sitzen in den Köpfen. Modern Angular lässt diese Altlasten bewusst hinter sich, und das erfordert eine aktive Entscheidung: nicht nur bei den Tools, auch bei der Denkweise.

Testing war kaputt. Das wusste jeder. Ausgesprochen hat es kaum jemand.

Wer Angular-Komponenten richtig testen wollte, musste wissen, wann Angular intern seine Change Detection ausführt. Das ist keine Testaufgabe – das ist Forensik.

Mit Vitest und dem Browser Mode ändert sich das. Die Komponente wird zur Blackbox: Man testet, was sie nach außen zeigt, nicht wie sie innen arbeitet. Manfred nennt das Komponententests, zur Abgrenzung von Unit-Tests – eine Ebene abstrakter, näher an dem, was Nutzer tatsächlich erleben. Karma und Jasmin sind abgekündigt, die Migration ist ohnehin fällig – was dabei herauskommt, wenn man es richtig macht, ist mehr als ein Tool-Wechsel.

Store und Forms: Reaktivität als durchgehendes Prinzip

Wer den SignalStore nur als Ersatz für NgRx betrachtet, hat seine wichtigste Eigenschaft noch nicht verstanden.

Manfred beschreibt ihn als die headless Variante der Anwendung – ein vollständiger Schnitt durch die Anwendungslogik, losgelöst von jeder UI-Schicht. Das ist eine Architekturentscheidung, weit mehr als nur ein Implementierungsdetail. Und dann Signal Forms: Manfred nennt sie „vielleicht die schönste API, die Angular je hervorgebracht hat“ – die dritte Formular-API, entwickelt auf Basis einer langen Auseinandersetzung mit den Schmerzpunkten der ersten beiden: Formulare nicht als Sonderfall des reaktiven Datenflusses, sondern als konsequenter Teil davon. Store und Forms zusammen zeigen, wie weit Angular die reaktive Logik durchgezogen hat.

Wenn das LLM die Anwendung steuert, entscheidet die Architektur

Agentic UI ist kein Zukunftsszenario – es ist eine Architekturentscheidung, die Teams jetzt treffen müssen.

Hier kommt interessanterweise der SignalStore zurück. Manfred beschreibt ein Szenario, das viele als Vision kennen: Ein KI-Sidecar, das bei Bedarf eingeblendet wird. Der Nutzer chattet, das Sidecar steuert die Anwendung über clientseitiges Tool Calling, verbunden mit dem Store – Routen, Formulare, Daten. Der Store als headless Variante ist genau das Bindeglied, das diese Architektur trägt.

Was er dabei nicht ausspart – und was ich für den wichtigsten Teil halte: Was passiert, wenn das Modell etwas tut, das nicht gewollt ist? Human in the Loop, Prüfmechanismen, Scorer — ohne geht’s nicht. Das sind Entwurfsentscheidungen, die vor dem ersten Produktionsrollout feststehen müssen.

Paradigmen wechselt man nicht nebenbei

Der Weg zu modernem Angular führt nicht durch eine API-Liste, er führt durch ein Umdenken und damit verbunden: eine neue Praxis. Wer das überspringt, wird früher oder später an harte Grenzen stoßen – spätestens, wenn ein Sprachmodell die eigene Anwendung fernsteuert.

Manfred arbeitet genau das in seiner Modern Angular Masterclass durch: drei Tage, von Signals und Resource API über SignalStore und Signal Forms bis zu Agentic UI und den Sicherheitsfragen, die dabei entstehen. Wer diesen Weg nicht nur lesen, sondern wirklich durcharbeiten will – Termine und alle Informationen auf angular-camp.de/masterclass.

🔍 Frequently Asked Questions (FAQ)

1. Was ist Modern Angular?
Modern Angular bezeichnet die aktuelle Version von Angular, die auf einem neuen reaktiven Datenflussmodell basiert. Kernbestandteile sind Signals, der SignalStore und Signal Forms, mit denen Entwickler Anwendungen datenflussorientiert und reaktiv gestalten können.

2. Was sind Angular Signals?
Angular Signals sind ein neues Reaktivitätskonzept, das Änderungen in Daten automatisch in der UI widerspiegelt. Im Gegensatz zu klassischen EventEmittern erleichtern Signals vorhersehbare State-Updates und verbessern die Architektur moderner Angular-Anwendungen.

3. Was kann man mit dem SignalStore machen?
Der SignalStore ist eine zentrale, headless Anwendungsschicht. Er verwaltet den Zustand der Anwendung unabhängig von der UI und ermöglicht Agentic UI-Integrationen, Signal Forms und effizientes State-Management, ohne auf alte Angular-Patterns zurückgreifen zu müssen.

4. Wer nutzt Modern Angular mit Signals?
Modern Angular wird von Enterprise-Teams, Angular-Entwicklern und Teilnehmern der Modern Angular Masterclass genutzt. Es richtet sich an Teams, die ihre Architektur modernisieren, alte Muster hinter sich lassen und reaktive Logik konsequent umsetzen wollen.

5. Wie wird Testing in Modern Angular gemacht?
Testing erfolgt mit Vitest im Browser Mode. Komponenten werden als Blackbox getestet: Es zählt, was sie nach außen zeigen, nicht, wie intern Change Detection oder Logik abläuft. Das ersetzt ältere Tools wie Karma oder Jasmine.

6. Was ist Agentic UI in Angular?
Agentic UI beschreibt die Integration von Sprachmodellen (LLMs) in die Anwendung. Über den SignalStore kann die KI Routen, Formulare oder Daten steuern. So entsteht eine reaktive, KI-gestützte UI, die direkt mit der Anwendungslogik verbunden ist.

7. Wo kann ich Modern Angular mit Signals lernen?
Die Modern Angular Masterclass von Manfred Steyer vermittelt praxisnah alle Kernkonzepte: Signals, SignalStore, Signal Forms und Agentic UI. Alle Infos und Anmeldung hier: angular-camp.de/masterclass